1 00:00:00,690 --> 00:00:04,560 Hello and welcome to this lecture in this late show. 2 00:00:04,560 --> 00:00:13,300 We will be creating the presentation which is this sixth sense for our app. 3 00:00:14,040 --> 00:00:21,310 Before we start to apply the here so far app Let's have a look at what it looks like out of mom. 4 00:00:21,360 --> 00:00:22,980 So open up your projet. 5 00:00:22,980 --> 00:00:32,750 This is my project directory and click on this index which is what we created before DoubleClick and 6 00:00:32,770 --> 00:00:36,390 a tool display what the app looks like. 7 00:00:36,390 --> 00:00:40,340 So this is what the app currently looks like. 8 00:00:40,590 --> 00:00:47,560 There's no functionality because I've not applied the javascript yet javascript has not been implemented. 9 00:00:47,720 --> 00:00:49,950 Mark this is the structure. 10 00:00:50,220 --> 00:00:58,260 So once we have our pli this year says it should look a lot prettier than it is at the moment. 11 00:00:58,850 --> 00:00:59,360 All right. 12 00:00:59,390 --> 00:01:02,370 This this blank Seer says file. 13 00:01:02,430 --> 00:01:03,900 So what I'm going to do. 14 00:01:03,930 --> 00:01:15,350 I've already written out the csx for this app projet to save time so you don't have to watch me type. 15 00:01:15,390 --> 00:01:21,570 I will paste the code entirely text a little and then explain the code to you. 16 00:01:21,600 --> 00:01:24,940 I think that would Dowd make more sense to you. 17 00:01:24,950 --> 00:01:26,580 Then you watch me type. 18 00:01:26,760 --> 00:01:35,150 So I'd place a code in whole key I have now got my SS added on. 19 00:01:35,150 --> 00:01:37,780 So let me run through the code with you. 20 00:01:38,190 --> 00:01:49,780 So the first line one here I got the body sule would see says you can style using the tag name or hide 21 00:01:49,990 --> 00:01:52,570 or class any way you see the hash tag here. 22 00:01:52,590 --> 00:01:54,400 That means it's an idea. 23 00:01:54,690 --> 00:02:08,430 So I'm using the idea to style that element so every C Ss malls have this format so you've got the outhaul. 24 00:02:08,430 --> 00:02:15,720 This is what we are going to style which is a body were placed in between this curly braces stassi Opening 25 00:02:15,920 --> 00:02:19,830 the closing an after we've done. 26 00:02:19,860 --> 00:02:23,920 We've defined the style with me to end that with a SEMICON. 27 00:02:24,190 --> 00:02:32,100 Alright so this is a property we want the proper to want up apply and this is of value where given that 28 00:02:32,100 --> 00:02:40,260 property so we separate the property from the value using a core loan and then we ended use in a semi 29 00:02:40,290 --> 00:02:41,250 colon. 30 00:02:41,610 --> 00:02:49,800 So here what I'm saying here is that I want the background for the body bag runkel to be this colour 31 00:02:50,350 --> 00:02:55,130 design hex decimal value X. It's called hex value. 32 00:02:55,140 --> 00:03:00,320 Anyway siddhi hash with numbers like this is called hex values so you can use. 33 00:03:00,360 --> 00:03:07,260 I could replace this and just type in the word great so you could use a column name if you know the 34 00:03:07,260 --> 00:03:10,490 column names or even use the hex value. 35 00:03:10,560 --> 00:03:13,300 If you know the hex value so that's it for the body. 36 00:03:13,390 --> 00:03:16,370 However give me this colour. 37 00:03:16,710 --> 00:03:20,530 Next is the input to import is the actual box. 38 00:03:20,530 --> 00:03:22,500 Are people typing this here. 39 00:03:22,500 --> 00:03:23,430 Is that input here. 40 00:03:23,460 --> 00:03:24,770 This here. 41 00:03:24,920 --> 00:03:25,940 The input. 42 00:03:26,070 --> 00:03:27,900 So what. 43 00:03:27,900 --> 00:03:29,760 Thats what Im styling here. 44 00:03:29,820 --> 00:03:31,290 The margin from the top. 45 00:03:31,290 --> 00:03:33,010 I want it to be 100 pixels. 46 00:03:33,030 --> 00:03:38,100 If you look at it at the moment its is car like joined today. 47 00:03:38,100 --> 00:03:45,840 So Im saying that from the top I want it to move down a certain level of pixels so I see the margin 48 00:03:45,840 --> 00:03:47,290 from the top. 49 00:03:47,340 --> 00:03:54,630 I want you to move a hundred pixels from the top from the left I want you to move to 20 pixels. 50 00:03:54,630 --> 00:03:57,110 These values you can play around with it. 51 00:03:57,120 --> 00:04:04,250 These are just my values so please feel free to experiment and change the values is really cool to do 52 00:04:04,260 --> 00:04:09,060 so you can see how it works and then the wave hear how wide the box will be. 53 00:04:09,080 --> 00:04:16,140 I've given it three 50 pixels all this time got to semicolon here and that would not work. 54 00:04:16,170 --> 00:04:21,480 So again the height of giving their height and display. 55 00:04:21,480 --> 00:04:23,210 I wanted to be in blocks. 56 00:04:23,220 --> 00:04:27,960 That is the way it is going to be display as a block. 57 00:04:29,370 --> 00:04:31,410 So everything in blue here. 58 00:04:31,590 --> 00:04:34,820 The property is high one too. 59 00:04:35,060 --> 00:04:43,500 I want to find the purple and the values for the property and needs to the property value with the colon 60 00:04:43,500 --> 00:04:43,850 here. 61 00:04:43,890 --> 00:04:47,970 Okay so again the same thing with the output. 62 00:04:47,970 --> 00:04:49,630 This is an output. 63 00:04:49,680 --> 00:04:57,640 This is where the Outerwall length of the word typed into this box will be displayed similar thing marjane 64 00:04:57,660 --> 00:04:58,440 from the top. 65 00:04:58,440 --> 00:04:59,640 I want it to drop down. 66 00:04:59,770 --> 00:05:06,980 Forty five pixels from the top with a hundred pixels which is how wide that would be. 67 00:05:06,980 --> 00:05:15,890 The background is like green marjane less from the left 400 pixels. 68 00:05:15,980 --> 00:05:21,630 This is the button which is this button here. 69 00:05:22,280 --> 00:05:30,740 Alright so the button that we've given in that high to give in on this is a collar which refers to the 70 00:05:30,740 --> 00:05:34,550 caller on the text inside the button. 71 00:05:34,850 --> 00:05:37,810 This is a background colour I've given the blue here. 72 00:05:37,820 --> 00:05:40,090 I have not use HEX colours here. 73 00:05:40,120 --> 00:05:44,090 I have used the actual column name and border style. 74 00:05:44,110 --> 00:05:44,990 I've said none. 75 00:05:44,990 --> 00:05:47,680 With the border style. 76 00:05:48,110 --> 00:05:51,200 Without this there will be shadows. 77 00:05:51,200 --> 00:05:59,470 You can see there will be some shadows around so the body of a star will remove the shadow on the button. 78 00:05:59,470 --> 00:06:00,600 That's what that does. 79 00:06:00,670 --> 00:06:06,300 Okay then we've got border radios is what will make it round it. 80 00:06:06,470 --> 00:06:12,800 So the moment the button looks like a square at the border they just will make it round it makes the 81 00:06:12,800 --> 00:06:14,760 edges rounded. 82 00:06:14,780 --> 00:06:17,820 That's what our radio does. 83 00:06:17,900 --> 00:06:20,630 And again these values play around with it. 84 00:06:20,650 --> 00:06:22,100 Here's 15 pixels here. 85 00:06:22,100 --> 00:06:23,900 You don't have to use 15. 86 00:06:23,960 --> 00:06:28,650 Just try different values and see which one you like best. 87 00:06:29,020 --> 00:06:32,430 Get inside there's a button idea here. 88 00:06:32,600 --> 00:06:33,990 The margin from the top. 89 00:06:33,990 --> 00:06:38,110 I wanted to drop 100 pixels margin from the left. 90 00:06:38,120 --> 00:06:39,930 I wanted to move from the left. 91 00:06:39,950 --> 00:06:42,560 Three hundred and eighty five pixels. 92 00:06:42,680 --> 00:06:44,130 Again these values. 93 00:06:44,150 --> 00:06:45,430 Play around with them. 94 00:06:45,430 --> 00:06:49,700 Apply your own values and see how it looks. 95 00:06:49,700 --> 00:06:51,500 So that's the end of that one. 96 00:06:51,530 --> 00:06:59,510 Then this head in tag here the head front tag which is this text here. 97 00:06:59,720 --> 00:07:02,950 Type a word gassy hate tag here. 98 00:07:03,200 --> 00:07:06,790 So this is the stylin I have applied. 99 00:07:06,830 --> 00:07:14,620 I wanted text to be centred so little text line property centred but colour. 100 00:07:14,660 --> 00:07:19,790 This is a colour which is black is a hex value for black. 101 00:07:19,900 --> 00:07:25,060 The margin from the top one is to move 50 pixels from the top. 102 00:07:25,100 --> 00:07:26,690 So let me save that. 103 00:07:26,900 --> 00:07:28,490 Save it. 104 00:07:28,490 --> 00:07:32,490 Go back to the documents refresh. 105 00:07:32,750 --> 00:07:33,590 This is what it looks like. 106 00:07:33,590 --> 00:07:34,220 You see. 107 00:07:34,220 --> 00:07:38,180 It looks much better where the stylin apply. 108 00:07:38,360 --> 00:07:46,550 So in this lecture we have applied stylee hour presentation to how our app. 109 00:07:46,850 --> 00:07:51,810 There is no functionality because we not applied any javascript hits. 110 00:07:51,820 --> 00:07:54,370 If I type in something nothing will work. 111 00:07:54,380 --> 00:07:56,310 See I see. 112 00:07:59,400 --> 00:08:07,380 Type in Helo and click that nothing will happen because I have not implemented the javascript we will 113 00:08:07,920 --> 00:08:11,340 be responsible for the function. 114 00:08:11,340 --> 00:08:12,530 That's it for now. 115 00:08:12,720 --> 00:08:13,590 Take care. 116 00:08:13,590 --> 00:08:14,440 Bye for now.